<script setup lang="ts">
import formButton from '@renderer/components/formButton.vue'
import NavBar from '@renderer/components/navBar.vue'
import roomForm from '@renderer/components/roomForm.vue'
import useComputeForm from '@renderer/composables/useComputeForm'
import { nextTick, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Round, CheckOne } from '@icon-park/vue-next'
import useStorage from '@renderer/composables/useStorage'
const route = useRouter()
const pageQuery = route.currentRoute.value.query
const storage = useStorage()
const calcalateHouseNumber = ref()
const emit = defineEmits<{
  (e: 'roomChange', roomList: string[]): void
}>()
const addRoomDialog = ref(false)
const allRoom = ref([
  '客厅',
  '餐厅',
  '过道',
  '主卧',
  '主卧过道',
  '次卧1',
  '次卧1过道',
  '次卧2',
  '次卧2过道',
  '次卧3',
  '次卧4',
  '厨房',
  '客卫',
  '洗手间',
  '主卫',
  '次卫',
  '阳台1',
  '阳台2',
  '阳台3',
  '阳台4',
  '衣帽间',
  Number(calcalateHouseNumber) == 1 ? '' : '楼梯间',
])
const checkRoom = ref<string[]>([])
const roomList = ref<RoomListModel[]>([])
const childRoomRef = ref<{ roomForm }[]>([])
const handleAddRoom = () => {
  addRoomDialog.value = true
}
const handleCheckRoom = (item: any) => {
  if (checkRoom.value.includes(item)) {
    checkRoom.value = checkRoom.value.filter((ceilingItem) => ceilingItem !== item)
  } else {
    checkRoom.value = [...checkRoom.value, item]
  }
}
// const handleReset = () => {
//   checkRoom.value = []
// }
const handleClose = () => {
  addRoomDialog.value = false
}
watch(checkRoom, async (newValue) => {
  emit('roomChange', newValue)
})
const getRoomData = () => {
  if (childRoomRef.value.length) {
    let returnValue = [] as RoomListModel[]
    childRoomRef.value.forEach((item) => {
      if (checkRoom.value.includes(item.roomForm.name)) {
        returnValue.push(item.roomForm)
      }
    })
    return [...returnValue]
  } else {
    return []
  }
}
defineExpose({
  getRoomData,
})
const { getHouseGather } = useComputeForm()
const initForm = async () => {
  const res = await getHouseGather({
    calculate_id: pageQuery.calculate_id,
    house_number: pageQuery.house_number,
  })
  if (res.length) {
    res.forEach((item) => {
      checkRoom.value.push(item.name)
    })
    roomList.value = res
  }
}
nextTick(async () => {
  calcalateHouseNumber.value = await storage.get('calcalateHouseNumber')
  await initForm()
})
</script>

<template>
  <main>
    <el-divider>
      <span class="text-xl">户型数据</span>
    </el-divider>
    <div class="flex justify-end gap-5">
      <formButton @click="handleAddRoom">添加房间</formButton>
    </div>
    <div class="flex flex-col" v-for="item in checkRoom" :key="item">
      <el-divider content-position="left">
        <span class="text-xl">{{ item }} </span>
      </el-divider>
      <roomForm :roomName="item" ref="childRoomRef" :roomList="roomList" />
    </div>
    <el-dialog v-model="addRoomDialog" width="640" align-center :show-close="false" style="padding: 0">
      <div class="flex flex-col">
        <NavBar title="新增房间" @handleClose="handleClose" />
        <div class="grid grid-cols-4 gap-y-5 gap-x-6 p-3">
          <div
            v-for="(item, index) in allRoom"
            :key="index"
            v-show="item"
            class="flex justify-between items-center py-2 px-3 rounded-md"
            :class="checkRoom.includes(item) ? 'bg-[#fff4e5] text-[#FF9600]' : 'bg-[#EEEEEE] text-black'"
            @click="handleCheckRoom(item)">
            <span>{{ item }}</span>
            <Round theme="outline" size="18" fill="#FF9600" v-if="!checkRoom.includes(item)" />
            <CheckOne theme="outline" size="18" fill="#FF9600" v-else />
          </div>
        </div>
      </div>
    </el-dialog>
  </main>
</template>

<style lang="scss"></style>
